body.login{
  padding-top     : 0;
  background-color: @color-main;
  min-height      : 100%;
  .login-container{
    width: 100%;
    display: table;
    main{
      display: table-row;
      height: 100%;
      .content-wrapper{
        display: table-cell;
        vertical-align: middle;
        .content{
          padding: 20px;
          .login-form{
            width : 320px;
            margin: 20px auto;
            padding-top: 50px;
            box-shadow : 0 5px 15px rgba(0, 0, 0, .5);
            .bb-icon{
              cursor: pointer;
              background-color: @color-main;
              width : 80px;
              height: 80px;
              line-height: 80px;
              font-size: 32px;
              border-radius: 100%;
              color: #fff;
              margin: 0 auto 30px;
              text-align: center;
            }
            h5 {
              margin-bottom: 30px !important;
              font-size: 17px;
              color: #000;
            }
            .has-feedback-left{
              .form-control {
                padding-right: 12px;
                padding-left: 36px;
                height: 36px;
                &:hover, &:focus{
                  box-shadow: 0 0 5px @color-main;
                  border: 1px solid @color-main;
                }
              }
              .message{
                color: #c52121;
                text-align: center;
                margin-top: 10px;
              }
            }
            .form-control-feedback {
                position: absolute;
                top: 0;
                right: 0;
                z-index: 2;
                display: block;
                width: 36px;
                height: 36px;
                line-height: 36px;
                text-align: center;
                pointer-events: none;
                right: auto;
                left: 0;
                color: #333;
                .fa {
                  line-height: 36px;
                }
            }
            .col-sm-6{
              padding: 0px;
              float: left;
              width: 50%;
            }
            .has-login-remember{
              text-align: left;
              .radio-inline, .checkbox-inline{
                padding-left: 28px;
                line-height: 21px;
                color:#333;
              }
              .checkbox-inline {
                .checker {
                  position: absolute;
                  display: inline-block;
                  cursor: pointer;
                  vertical-align: middle;
                  top: 1px;
                  left: 0;
                  span{
                    width: 18px;
                    height: 18px;
                    color: #455a64;
                    border: 2px solid #607d8b;
                    display: inline-block;
                    text-align: center;
                    position: relative;
                    &:after {
                      content: "\e013";
                      font-family: 'Glyphicons Halflings';
                      display: none;
                      position: absolute;
                      font-size: 12px;
                      line-height: 1;
                      left: 1px;
                      -webkit-text-stroke: 1px #fff !important;
                      -webkit-font-smoothing: antialiased;
                      -moz-osx-font-smoothing: grayscale;
                    }
                    &.checked:after {
                      display: block;
                    }
                  }
                  input[type=checkbox]{
                    border: none;
                    background: none;
                    display: -moz-inline-box;
                    display: inline-block;
                    margin: 0;
                    vertical-align: top;
                    cursor: pointer;
                    position: absolute;
                    z-index: 2;
                    opacity: 0;
                    filter: alpha(opacity=0);
                  }
                }
              }
            }
            .content-divider {
              text-align: center;
              position: relative;
              z-index: 1;
              & > span {
                background-color: #fff;
                display: inline-block;
                padding-left: 12px;
                padding-right: 12px;
                &:before {
                  content: "";
                  position: absolute;
                  top: 50%;
                  left: 0;
                  height: 1px;
                  background-color: #ddd;
                  width: 100%;
                  z-index: -1;
                }
              }
            }
            button[type="submit"]{
              height: 36px;
              font-size: 14px;
              color: #18631b;
              background-color: @color-input-hover;
              i{
                .transition(transform .2s ease-out);
              }
              &:hover,&:active{
                color: #fff;
                .transition(all 0.3s ease);
                i{
                  transform: translateX(15px);
                }
              }
            }
            .test-info{
              width: 81%;
              margin: 0 auto;
              color:#777;
              text-shadow: 0 0 0 #777;
              text-align: left;
            }
          }
        }
      }
    }
    footer{
      background-color: @color-main;
      color: #95da98 !important;
      #footer-inner a{
        color: #95da98;
        &:hover{
          color: #fff;
        }
      }
    }
  }
}


@media (max-width: 320px) {
  body.login{
    .login-container{
      main{
        .content-wrapper{
          .content{
            .login-form{
              width : auto;
            }
          }
        }
      }
    }
  }
}